import React from "react"; import { useContext } from "react"; import styled from "styled-components"; import { GlobalContext } from "../context/GlobalState"; import IncomeTransactions from "./IncomeTrasactions"; function Head() {

En esta parte dibujo un mes y un año

 let months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; let mY = new Date(); let monthName = months[mY.getMonth()]; const current = new Date(); const date = `${current.getFullYear()}`; const { incomeTransactions, expenseTransactions } = useContext(GlobalContext); const incomeAmounts = incomeTransactions.map( (incomeTransaction) => incomeTransaction.incomeAmount ); const expenseAmounts = expenseTransactions.map( (expenseTransaction) => expenseTransaction.expenseAmount );

En esta sección, aparece el error "expenseAmounts.reduce(...).toFixed is not function"

 const totalIncome = incomeAmounts .reduce((acc, item) => (acc += item), 0) .toFixed(2); const totalExpense = expenseAmounts .reduce((acc, item) => (acc += item), 0) .toFixed(2);

El código a continuación está bien y todo funciona, el problema está en algún lugar donde lo marqué como devolución (Presupuesto disponible en {monthName} {date}

{ingresos totales - gastos totales}.00

 <div>+ {totalIncome}</div> </div> <div className="expenses-top mt-3"> <div>Expenses</div> <div>- {totalExpense}</div> </div> </BlockHeader> <ImageHeader src="/img/header-budget.png" /> </Wrap> </div> ); } export default Head;